<template>
  <div class="box">
    <h1> 填写工单</h1>
    <el-form>
      <el-row :gutter="20">
        <el-col :span="4">
          <div>
            <el-input placeholder="请输入内容" v-model="input">
              <template slot="prepend">工单号</template>
            </el-input>
          </div>
        </el-col>
        <el-col :span="5">
          <div>
            输入日期
            <el-date-picker type="datetime" placeholder="选择日期时间"></el-date-picker>
          </div>
        </el-col>
        <el-col :span="4">
          <div>
            <el-input placeholder="请输入内容" v-model="input">
              <template slot="prepend">工单域</template>
            </el-input>
          </div>
        </el-col>
      </el-row>

      <div style="margin-top: 15px;">
        <el-divider></el-divider>
        <div>必填信息</div>
        <div style="margin-top:15px;">
          <el-row :gutter="50">
            <el-col :span="4">
              <div>
                <el-input placeholder="请输入内容" v-model="input">
                  <template slot="prepend">报告人</template>
                </el-input>
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <el-input placeholder="请输入内容" v-model="input">
                  <template slot="prepend">报告人电话</template>
                </el-input>
              </div>
            </el-col>
          </el-row>
        </div>
        <div style="margin-top:15px;">
          <el-row :gutter="50">
            <el-col :span="6">
              <div>
                <el-input placeholder="请输入内容" v-model="input">
                  <template slot="prepend">报告部门</template>
                </el-input>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-input placeholder="请输入内容" v-model="input">
                  <template slot="prepend">报告部门电话</template>
                </el-input>
              </div>
            </el-col>
          </el-row>
        </div>
        <div style="margin-top:15px;">
          <el-row :gutter="50">
            <el-col :span="7">
              <div>
                <el-input placeholder="请输入内容" v-model="input">
                  <template slot="prepend">接报/维护部门</template>
                </el-input>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-input placeholder="请输入内容" v-model="input">
                  <template slot="prepend">接报/维护部门电话</template>
                </el-input>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <el-divider></el-divider>
      <div style="margin-top: 15px;">
        <div>故障详细资料</div>
        <div style="margin-top:15px;">
          <el-row :gutter="20">
            <el-col :span="7">
              <div>
                <el-input placeholder="请输入内容" v-model="input">
                  <template slot="prepend">设备编码</template>
                </el-input>
              </div>
            </el-col>
            <el-col :span="3">
              <div>
                <el-input placeholder="请输入内容" v-model="input">
                  <template slot="prepend">域</template>
                </el-input>
              </div>
            </el-col>
          </el-row>
        </div>
        <div style="margin-top:15px;">
          <el-row :gutter="20">
            <el-col :span="10">
              <div>
                <el-input placeholder="请输入内容" v-model="input">
                  <template slot="prepend">设备名称</template>
                </el-input>
              </div>
            </el-col>
          </el-row>
        </div>
        <div style="margin-top:15px;">
          故障描述
          <el-row :gutter="20">
            <el-col :span="10">
              <div style="margin-top:5px;">
                <el-input placeholder="请输入内容" v-model="input" type="textarea" :rows="3">
                  <template slot="prepend">设备名称</template>
                </el-input>
              </div>
            </el-col>
          </el-row>
        </div>
        <div>
          <el-row :gutter="20">
            <el-col :span="5">
              <div style="margin-top:5px;">
                报修时间
                <el-date-picker type="datetime" placeholder="选择日期时间"></el-date-picker>
              </div>
            </el-col>
            <el-col :span="5">
              <div style="margin-top:5px;">
                要求完成时间
                <el-date-picker type="datetime" placeholder="选择日期时间"></el-date-picker>
              </div>
            </el-col>
          </el-row>
          <div></div>
        </div>
      </div>

      <el-divider style="width:500px;"></el-divider>
      <div style="margin-top: 15px;">
        <div>故障代码</div>
        <div style="margin-top:15px;">
          <el-row :gutter="20">
            <el-col :span="7">
              <div>
                <el-input placeholder="请输入内容" v-model="input">
                  <template slot="prepend">发现</template>
                </el-input>
              </div>
            </el-col>
            <el-col :span="3">
              <div>
                <el-input placeholder="请输入内容" v-model="input">
                  <template slot="prepend">域</template>
                </el-input>
              </div>
            </el-col>
          </el-row>
        </div>
        <div style="margin-top:15px;">
          <el-row :gutter="20">
            <el-col :span="10">
              <div>
                <el-input placeholder="请输入内容" v-model="input">
                  <template slot="prepend">设备名称</template>
                </el-input>
              </div>
            </el-col>
          </el-row>
        </div>
        <div style="margin-top:15px;">
          故障描述
          <el-row :gutter="20">
            <el-col :span="10">
              <div style="margin-top:5px;">
                <el-input placeholder="请输入内容" v-model="input" type="textarea" :rows="3">
                  <template slot="prepend">设备名称</template>
                </el-input>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "Test",
  data() {
    return {
      input: ""
    };
  }
};
</script>


